<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文字展开</title>
		<style type="text/css">
			*{ margin: 0; padding: 0;}
			#box{ width: 200px;
			      border: #000 solid 1px;
			      margin: 100px auto;
			      line-height: 30px;
			      font-size: 14px;
			      text-indent: 5px;}
			li{ list-style: none;}
			p{  font-weight: bold;
			    background: #DBDEE1;}
		    ul{ display: none;}
		    ul.on{ display: block;}
		</style>
	</head>
	<body>
		<div id="box">
			<p>Web前端</p>
			<ul class="on">
				<li>JavaScript</li>
				<li>DIV+CSS</li>
				<li>jQuery</li>
			</ul>
			
			<p>后台脚本</p>
			<ul>
				<li>PHP</li>
				<li>ASP.net</li>
				<li>JSP</li>
			</ul>
			
			<p>前端框架</p>
			<ul>
				<li>YUI</li>
				<li>Extjs</li>
				<li>Esspress</li>
			</ul>
		</div>
	</body>
</html>
<script src="../jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$('p').click(function(){
		$(this).next().toggle(1000);
	})
</script>